<template>
  <!-- FloatMenu.vue -->
  <div class="float-menu">
    <div class="float-menu-container">
      <!-- 主按钮 -->
      <ElButton circle type="primary" @click="showButtons = !showButtons" title="更多" class="main-btn">
        <el-icon :style="{ transition: 'transform .5s', transform: `rotate(${moreBtnAngle}deg)` }">
          <MoreFilled />
        </el-icon>
      </ElButton>

      <!-- 动态按钮列表 -->
      <transition v-for="(slot, index) in validSlots" :key="index" :name="`btn${index + 1}`">
        <div v-if="showButtons" class="flot-btn-wrapper" :style="getButtonPosition(index)">
          <slot :name="`button${index + 1}`"></slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { computed, useSlots, ref } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'

const slots = useSlots()
const showButtons = ref(false)

// 只取前4个按钮插槽
const validSlots = computed(() => {
  const slotNames = Object.keys(slots)
  const buttonSlots = slotNames.filter(name => name.startsWith('button'))
  // 只取前4个按钮
  return buttonSlots.slice(0, 4).map((_, index) => `button${index + 1}`)
})

const moreBtnAngle = computed(() => (showButtons.value ? 270 : 0))

// 根据按钮数量和索引计算位置
const getButtonPosition = (index: number) => {
  const count = validSlots.value.length
  const positions = calculatePositions(count)
  return {
    transform: `translate(${positions[index].x}, ${positions[index].y})`
  }
}

// 计算按钮位置的函数
const calculatePositions = (count: number) => {
  const positions: { x: string; y: string }[] = []

  switch (count) {
    case 1:
      positions.push({ x: '-150%', y: '0' })
      break
    case 2:
      positions.push({ x: '-75%', y: '-125%' })
      positions.push({ x: '75%', y: '-125%' })
      break
    case 3:
      positions.push({ x: '-150%', y: '0' })
      positions.push({ x: '-75%', y: '-125%' })
      positions.push({ x: '75%', y: '-125%' })
      break
    case 4:
    default:
      positions.push({ x: '-150%', y: '0' })
      positions.push({ x: '-75%', y: '-125%' })
      positions.push({ x: '75%', y: '-125%' })
      positions.push({ x: '150%', y: '0' })
      break
  }

  return positions
}
</script>

<style scoped>
.float-menu {
  position: fixed;
  bottom: 40px;
  right: 80px;
  z-index: 10;
}

.float-menu-container {
  position: relative;
}

.main-btn {
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
}

.flot-btn-wrapper {
  position: absolute;
  top: 0;
  transition: transform 0.3s ease;
}

/* 按钮1动画 */
.btn1-enter-from,
.btn1-leave-to {
  transform: translate(0, 0) !important;
  opacity: 0;
}

.btn1-enter-active,
.btn1-leave-active {
  transition: all 0.3s ease;
}

/* 按钮2动画 */
.btn2-enter-from,
.btn2-leave-to {
  transform: translate(0, 0) !important;
  opacity: 0;
}

.btn2-enter-active,
.btn2-leave-active {
  transition: all 0.3s ease;
}

/* 按钮3动画 */
.btn3-enter-from,
.btn3-leave-to {
  transform: translate(0, 0) !important;
  opacity: 0;
}

.btn3-enter-active,
.btn3-leave-active {
  transition: all 0.3s ease;
}

/* 按钮4动画 */
.btn4-enter-from,
.btn4-leave-to {
  transform: translate(0, 0) !important;
  opacity: 0;
}

.btn4-enter-active,
.btn4-leave-active {
  transition: all 0.3s ease;
}
</style>
